<template>
  <div class="p-2">
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <div>
            <el-button v-if="infoData.companyName == ''" type="primary" @click="handleAdd" v-hasPermi="['system:companyInfo:add']">新增</el-button>
            <el-button v-else type="primary" @click="handleUpdate(hmContractList[0])">修改</el-button>
          </div>

          <el-col :span="1.5">
            <el-button type="primary" @click="handleExport(infoData.contractExample)">查看电子合同版本</el-button>
          </el-col>

          <el-col :span="1.5">
            <el-button icon="Download" @click="handleExport(infoData.contract)">下载</el-button>
          </el-col>

          <el-col :span="1.5">
            <el-button icon="Upload" @click="handleFile(infoData.contractExample, 'contractExample')">上传电子合同版本</el-button>
          </el-col>

          <el-col :span="1.5">
            <el-button icon="Upload" @click="handleFile(infoData.contract, 'contract')">上传电子合同</el-button>
          </el-col>

          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <el-card class="box-card" v-show="!dialog.visible">
            <div>
              <ul class="list-group list-group-striped">
                <li class="list-group-item">
                  主体名称
                  <div class="pull-right">{{ infoData.companyName }}</div>
                </li>
                <li class="list-group-item">
                  法定代表
                  <div class="pull-right">{{ infoData.companyPerson }}</div>
                </li>
                <li class="list-group-item">
                  通讯地址
                  <div class="pull-right">{{ infoData.companyAddress }}</div>
                </li>
                <li class="list-group-item">
                  联系电话
                  <div class="pull-right">{{ infoData.companyPhone }}</div>
                </li>
                <li class="list-group-item">
                  银行账户
                  <div class="pull-right">{{ infoData.cardName }}</div>
                </li>
                <li class="list-group-item">
                  银行账号
                  <div class="pull-right">{{ infoData.cardNumber }}</div>
                </li>
                <li class="list-group-item">
                  开户行
                  <div class="pull-right">{{ infoData.bankName }}</div>
                </li>
                <li class="list-group-item">
                  小店名称
                  <div class="pull-right">{{ infoData.storeName }}</div>
                </li>
                <li class="list-group-item">
                  小店ID
                  <div class="pull-right">{{ infoData.storeId }}</div>
                </li>
                <li class="list-group-item">
                  小店主体
                  <div class="pull-right">{{ infoData.storeCompany }}</div>
                </li>
              </ul>
            </div>
          </el-card>
          <el-card v-show="dialog.visible">
            <el-form ref="hmContractFormRef" :model="form" :rules="rules" label-width="100px">
              <el-form-item label="主体名称" prop="companyName">
                <el-input v-model="form.companyName" placeholder="请输入主体名称" />
              </el-form-item>
              <el-form-item label="法定代表" prop="companyPerson">
                <el-input v-model="form.companyPerson" placeholder="请输入法定代表" />
              </el-form-item>
              <el-form-item label="通讯地址" prop="companyAddress">
                <el-input v-model="form.companyAddress" placeholder="请输入通讯地址" />
              </el-form-item>
              <el-form-item label="联系电话" prop="companyPhone">
                <el-input v-model="form.companyPhone" placeholder="请输入联系电话" />
              </el-form-item>
              <el-form-item label="银行账户" prop="cardNumber">
                <el-input v-model="form.cardNumber" placeholder="请输入银行账户" />
              </el-form-item>
              <el-form-item label="开户行" prop="bankName">
                <el-input v-model="form.bankName" placeholder="请输入开户行" />
              </el-form-item>
              <el-form-item label="小店名称" prop="storeName">
                <el-input v-model="form.storeName" placeholder="请输入小店名称" />
              </el-form-item>
              <el-form-item label="小店ID" prop="storeId">
                <el-input v-model="form.storeId" placeholder="请输入经营范围" />
              </el-form-item>
              <el-form-item label="小店主体" prop="storeCompany">
                <el-input v-model="form.storeCompany" placeholder="请输入小店主体" />
              </el-form-item>
            </el-form>
            <el-button @click="cancel">取 消</el-button>
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>
          </el-card>
        </el-col>
        <el-col :span="18" :xs="24"> </el-col>
      </el-row>

      <!-- 添加或修改OSS对象存储对话框 -->
      <el-dialog :title="dialogFile.title" v-model="dialogFile.visible" width="500px" append-to-body>
        <el-form ref="ossFormRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="文件名">
            <fileUpload v-model="formFile.file" :limit="1" @update:modelValue="handleChange" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button :loading="buttonLoading" type="primary" @click="submitFormFile">确 定</el-button>
            <el-button @click="cancelFile">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
 
 <script setup name="HmContract" lang="ts">
import { listHmContract, getHmContract, delHmContract, addHmContract, updateHmContract } from '@/api/system/hmContract';
import { HmContractVO, HmContractQuery, HmContractForm } from '@/api/system/hmContract/types';
import { OssForm } from '@/api/system/oss/types';
import { listByIds } from '@/api/system/oss';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const hmContractList = ref<HmContractVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const typeFile = ref<string>();

const queryFormRef = ref<ElFormInstance>();
const hmContractFormRef = ref<ElFormInstance>();
const ossFormRef = ref<ElFormInstance>();

const infoData: HmContractForm = reactive({});

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const dialogFile = reactive<DialogOption>({
  visible: false,
  title: ''
});

const formFile = ref<OssForm>({ file: undefined });

const initFormData: HmContractForm = {
  id: undefined,
  contract: undefined,
  contractExample: undefined,
  companyName: undefined,
  companyPerson: undefined,
  companyAddress: undefined,
  companyPhone: undefined,
  bankName: undefined,
  cardName: undefined,
  cardNumber: undefined,
  storeName: undefined,
  storeId: undefined,
  storeCompany: undefined,
  remark: undefined
};
const data = reactive<PageData<HmContractForm, HmContractQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    id: undefined,
    contract: undefined,
    contractExample: undefined,
    companyName: undefined,
    companyPerson: undefined,
    companyAddress: undefined,
    companyPhone: undefined,
    bankName: undefined,
    cardName: undefined,
    cardNumber: undefined,
    storeName: undefined,
    storeId: undefined,
    storeCompany: undefined,
    remark: undefined,
    tenantId: undefined,
    delFlag: undefined,
    createDept: undefined,
    createBy: undefined,
    createTime: undefined,
    updateBy: undefined,
    updateTime: undefined,
    params: {}
  },
  rules: {}
});

const { queryParams, form, rules } = toRefs(data);

/** 查询合同管理列表 */
const getList = async () => {
  loading.value = true;
  const res = await listHmContract(queryParams.value);
  Object.assign(infoData, res.rows[0]);
  hmContractList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  hmContractFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: HmContractVO[]) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 新增按钮操作 */
const handleAdd = () => {
  dialog.visible = true;
  dialog.title = '添加合同管理';
  nextTick(() => {
    reset();
  });
};

/** 修改按钮操作 */
const handleUpdate = async (row?: HmContractVO) => {
  if (!row) {
    await addHmContract({ ...initFormData });
    await getList();
  }
  loading.value = true;
  dialog.visible = true;
  dialog.title = '修改合同管理';
  await nextTick(async () => {
    reset();
    const _id = row?.id || ids.value[0];
    const res = await getHmContract(hmContractList.value[0].id);
    loading.value = false;
    Object.assign(form.value, res.data);
  });
};

/** 提交按钮 */
const submitForm = () => {
  hmContractFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateHmContract(form.value).finally(() => (buttonLoading.value = false));
      } else {
        await addHmContract(form.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('保存成功');
      dialog.visible = false;
      await getList();
    }
  });
};

/** 删除按钮操作 */
const handleDelete = async (row?: HmContractVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除合同管理编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
  await delHmContract(_ids);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

/** 导出按钮操作 */
const handleExport = (ossId: string) => {
  proxy?.$download.oss(ossId);
};

// 上传
const handleFile = async (id: string, type: string) => {
  // 文件回显
  const res = await listByIds(id);
  const list = res.data.map((oss) => {
    const data = { name: oss.originalName, url: oss.url, ossId: oss.ossId };
    return data;
  });
  formFile.value = { file: list };
  // 标记上传方式
  typeFile.value = type;
  dialogFile.visible = true;
  dialogFile.title = '上传文件';
};

const handleChange = (value: string) => {
  console.log(111, value);
  // 上传模板文件
  if (typeFile.value == 'contractExample') {
    hmContractList.value[0].contractExample = value;
  } else {
    hmContractList.value[0].contract = value;
  }
};

/** 提交按钮 */
const submitFormFile = async() => {
  dialogFile.visible = false;

  await updateHmContract(hmContractList.value[0]);
  proxy?.$modal.msgSuccess('保存成功');
  await getList();
};

/** 取消按钮 */
function cancelFile() {
  dialogFile.visible = false;
  resetFile();
}
/** 表单重置 */
function resetFile() {
  formFile.value = { file: undefined };
  ossFormRef.value?.resetFields();
}
onMounted(() => {
  getList();
});
</script>
<style scoped>
</style>